﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>横向选项卡</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../../assets/css/style.css" rel="stylesheet" />
</head>
<body id="body">
    <div class="page-wraper">

        <h3 class="page-title">横向选项卡</h3>
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <i class="fa fa-home"></i>
                    <a href="index.html">页面组件</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <a href="#">横向选项卡</a>
                </li>
            </ul>
        </div>

        <div class="mui-tabs tabs-ver">
            <ul class="tabs-hd clearfix">
                <li><a href="#home" class="active">选项卡一</a></li>
                <li><a href="#panel">选项卡二</a></li>
                <li><a href="#copy">选项卡三</a></li>
            </ul>
            <div class="tabs-body">
                <div id="home" class="tabs-panel active">这里是显示信息的内容</div>
                <div id="panel" class="tabs-panel">这里是系统参数的内容</div>
                <div id="copy" class="tabs-panel">这里是版权说明的内容</div>
            </div>
        </div>

        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">框架首页布局</h3>
            </div>
            <div class="panel-body">
                <pre>
<code data-language="html">//纵向选项卡代码
//class类有tabls-ver就是纵向，没有就是横向
<div class="mui-tabs tabs-ver">
    <ul class="tabs-hd">
        <li><a href="#home" class="active">选项卡一</a></li>
        <li><a href="#panel">选项卡二</a></li>
        <li><a href="#copy">选项卡三</a></li>
    </ul>
    <div class="tabs-body">
        <div id="home" class="tabs-panel active">这里是显示信息的内容</div>
        <div id="panel" class="tabs-panel">这里是系统参数的内容</div>
        <div id="copy" class="tabs-panel">这里是版权说明的内容</div>
    </div>
</div>
</code>
</pre>
            </div>
        </div>

    </div>

    <!--JS 代码-->
    <script src="/assets/js/plugins/jquery.1.8.3.js"></script>
    <script src="/assets/js/plugins/jquery.mui.js"></script>
    <script src="/assets/js/plugins/rainbow-custom.min.js"></script>
</body>
</html>
